<!DOCTYPE html>
<html lang="en">
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/resource/common/layui/css/layui.css">
    <link rel="stylesheet" href="/resource/js/front/index.css">
</head>
<body>
<div th:replace="front/head :: heads"></div>
<div class="layui-container house-list">
    <p class="classify"><a href="index.html">首页</a> &gt; <span th:text="${classify.name}"></span></p>
    <div class="filter">
        <div><span>分类：</span>
            <ul>
                <li class="active allthing">全部</li>
                <li th:each="chdClassify:${chdClassifyList}" class="sonClassify" th:text="${chdClassify.name}"
                    th:id="${chdClassify.id}">
                </li>
            </ul>
        </div>
        <!--<div><span>季节：</span>
            <ul>
                <li class="active">全部</li>
                <li>春</li>
                <li>夏</li>
                <li>秋</li>
                <li>冬</li>
            </ul>
        </div>-->
        <div><span>排序：</span>
            <ul>
                <li class="active default">默认</li>
                <li class="toUpPrice">价格从高到低</li>
                <li class="toDownPrice">价格从低到高</li>
                <li class="upTime">上架时间</li>
            </ul>
        </div>
    </div>
    <div class="layui-row layui-col-space25 productList">

    </div>
    <div id="test1"></div>
</div>
<!-- layui.js -->
<script type="text/javascript" src="/resource/common/layui/layui.js"></script>
<script type="text/javascript" src="/resource/js/front/house.js"></script>
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>

<![endif]-->
<script th:inline="javascript">
    layui.use(['table', 'layer', 'form', 'laypage'], function () {
        var table = layui.table,
            $ = layui.$,
            layer = layui.layer,
            laypage = layui.laypage,
            form = layui.form;
        //页面加载步骤
        //step1:先从后台查询数据总数//未选择子分类//初始化分页插件
        //父分类id
        var classifyId = [[${classify.id}]]
        var orderParam = '';
        var chdClassId
        stepOne();
        //step2:选择子分类时,后台查询数据总数重新加载page插件
        $('.sonClassify').on('click', function () {
            chdClassId = $(this).attr("id");
            stepOne(chdClassId, orderParam);
            // $.ajax({
            //     url: '/front/countAjax.do',
            //     type: 'post',
            //     data: {"classifyId": classifyId, 'chdClassId': chdClassId},
            //     dataType: 'json',
            //     async: false,
            //     success: function (data) {
            //         laypageInit(data, chdClassId, orderParam)
            //     }
            // });
        })
        //选择全部时的方法函数
        $('.allthing').on('click', function () {
            chdClassId = '';
            stepOne(chdClassId, orderParam);
        })
        //价格从低到高
        $('.toUpPrice').on('click', function () {
            orderParam = 'price desc';
            stepOne(chdClassId, orderParam)
        })
        //价格从高到低
        $('.toDownPrice').on('click', function () {
            orderParam = 'price asc';
            stepOne(chdClassId, orderParam)
        })
        //上架时间
        $('.upTime').on('click', function () {
            orderParam = 'createTime asc';
            stepOne(chdClassId, orderParam)
        })
        $('.default').on('click', function () {
            orderParam = '';
            stepOne(chdClassId, orderParam)
        })

        //封装函数
        function stepOne(chdClassId, orderParam) {
            $.ajax({
                url: '/front/countAjax.do',
                type: 'post',
                data: {"classifyId": classifyId, 'chdClassId': chdClassId},
                dataType: 'json',
                async: false,
                success: function (data) {
                    laypageInit(data, chdClassId, orderParam)
                }
            });
        }

        //分页插件js
        function laypageInit(count, chdClassId, orderParam) {
            laypage.render({
                elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
                , count: count //数据总数，从服务端得到
                , limit: '12'//默认条数,从服务端得到
                , curr: 1
                , jump: function (obj, first) {
                    //obj包含了当前分页的所有参数，比如：
                    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                    console.log(obj.limit); //得到每页显示的条数
                    createList(chdClassId, obj.curr, obj.limit, orderParam);
                }
            });
        }

        //生成商品列表的js
        function createList(chdClassId, page, limit, orderParam) {
            //清空productList div
            $('.productList').html('')
            //向后台请求数据
            $.ajax({
                url: '/front/productAjax.do',
                type: 'post',
                data: {
                    "classifyId": classifyId,
                    "chdClassId": chdClassId,
                    "page": page,
                    "limit": limit,
                    "orderParam": orderParam,
                },
                dataType: 'json',
                async: false,
                success: function (result) {
                    if (result.status) {
                        //加载商品列表
                        var data = result.obje;
                        var str = ''
                        for (var i = 0; i < data.length; i++) {
                            str += '<div class="layui-col-xs6 layui-col-sm3">';
                            str += '<div class="list-detail">';
                            str += '<div class="img"><img  style="width: 291px;height: 270px' +
                                '" src="' + data[i].img + '"></div>';
                            str += '<p class="title"><a href="/front/productDetails.do?id=' + data[i].id + '">' + data[i].name + '</a></p>';
                            str += '<p><span class="price">' + data[i].price + '￥</span><span>' + data[i].saleNumber + '</span>人付款</p>';
                            str += '  </div>';
                            str += ' </div>';
                        }
                        //追加到productList div中
                        $('.productList').html(str)
                    } else {
                        layer.msg(result.msg);
                    }
                }
            });
        }
    });


</script>

</body>
</html>